<template>
  <el-table :data="recommends" border style="width: 100%">
    <el-table-column type="index" prop="date" label="序号" width="70" />
    <el-table-column prop="img" label="图片" width="100">
      <template #default="scope">
        <img :src="scope.row.img1">
      </template>
    </el-table-column>
    <el-table-column prop="address" label="名称" width="200">
      <template #default="scope">
        <p>{{ scope.row.proname }}</p>
      </template>
    </el-table-column>
    <el-table-column prop="address" label="品牌" width="150">
      <template #default="scope">
        <p>{{ scope.row.brand }}</p>
      </template>
    </el-table-column>
    <el-table-column prop="address" label="分类">
      <template #default="scope">
        <p>{{ scope.row.category }}</p>
      </template>
    </el-table-column>
    <el-table-column prop="address" label="原价">
      <template #default="scope">
        <p>{{ scope.row.originprice }}</p>
      </template>
    </el-table-column>
    <el-table-column prop="address" label="折扣">
      <template #default="scope">
        <p>{{ scope.row.discount }}</p>
      </template>
    </el-table-column>
    <el-table-column prop="address" label="销量">
      <template #default="scope">
        <p>{{ scope.row.sales }}</p>
      </template>
    </el-table-column>
    <el-table-column prop="address" label="是否秒杀">
      <template #default="scope">
        <el-switch @change="(val: boolean) => changeRecommend(scope.row.proid, val)" v-model="scope.row.isrecommend" />
      </template>
    </el-table-column>
    <el-table-column prop="address" label="操作" width="150">
      <template #default>
        <el-button size="small" type="danger">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import service from '@/utils/service.ts'
import { ElNotification } from 'element-plus'
import type { IGoods } from '../../mytype'




const recommends = reactive<IGoods[]>([])
// 获取推荐列表
function getRecommend() {
  service({
    url: '/admin/pro/showdata',
    method: 'post',
    data: {
      type: 'isrecommend',
      flag: 1
    }
  }).then((res: any) => {
    if (res.data.code === '200') {
      recommends.length = 0
      res.data.data.forEach((item: any) => {
        item.isrecommend = (item.isrecommend ? true : false);
      })
      recommends.push(...res.data.data)
    }
  })
}
getRecommend()

// 更改推荐列表
const changeRecommend = (proid: string, val: boolean) => {
  service({
    url: '/admin/pro/updateFlag',
    method: 'post',
    data: {
      proid,
      type: 'isrecommend',
      flag: val
    }
  }).then((res: any) => {
    if (res.data.code === '200') {
      ElNotification({
        message: '修改推荐状态成功！',
        type: 'success',
      })
      getRecommend()
    }
  })
}
</script>

<style scoped>
.el-table {
  margin-top: 20px;
  border-radius: 15px;
}

img {
  width: 60px;
  height: 60px;
}
</style>